const { shared, timing, Easing, runOnJS } = wx.worklet;
const { get, post } = require('../../../../utils/request.js')
const moment = require('../../../../utils/moment.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    directionFlag: {},
    childDepositData: [],
    fixMoneyData: [],
    fixMoneyAnimal: [{
      cardX: {},
      actionX: {}
    }, {
      cardX: {},
      actionX: {}
    }],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.freshData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  initDepositData(data) {
    const deposits = data;
    const temp = []
    deposits.forEach(() => {
      temp.push({
        cardX: shared(0),
        actionX: shared(0)
      })
    })

    this.setData({
      fixMoneyData: deposits,
      fixMoneyAnimal: temp
    })

    this.data.fixMoneyAnimal.forEach((item, index) => {
      item.cardX.value = 0;
      item.actionX.value = 0;

      this.applyAnimatedStyle(`.card-index-${index}`, () => {
        'worklet';
        return {
          transform: `translateX(${item.cardX.value}px)`,
        };
      });

      this.applyAnimatedStyle(`.supply-index-${index}`, () => {
        'worklet';
        return {
          transform: `translateX(${item.actionX.value}px)`,
        };
      });

    })
  },
  ontouched({ currentTarget: { id } }) {
    const item = this.data.fixMoneyData[id];
    item.active = true;
    this.setData({
      fixMoneyData: this.data.fixMoneyData
    })
  },
  closeCard(index) {
    const child = this.data.fixMoneyAnimal[index];
    const durationTime = 600;
    const animalBezier = Easing.bezier(.16, .53, .18, .82);

    this.updateFixMoney(index, false)
    child.cardX.value = timing(0, {
      duration: durationTime,
      easing: animalBezier,
    });
    child.actionX.value = timing(0, {
      duration: durationTime,
      easing: animalBezier,
    });
  },
  tapFixMoney({ currentTarget: { id } }) {
    const item = this.data.fixMoneyData[id];
    if (!item.cardOpened) {
      wx.navigateTo({
        url: `/pages/business/fixGet/info/fixGetInfo?id=${item.id}`,
      })
    } else {
      this.closeCard(id);
    }
  },
  supplyGetMoney({ currentTarget: { id } }) {
    const item = this.data.fixMoneyData[id];
    wx.navigateTo({
      url: `/pages/business/fixGet/detail/fixGetDetail?id=${item.id}`,
    })
  },

  updateFixMoney(index, openedFlag) {
    this.data.fixMoneyData[index].cardOpened = openedFlag
  },

  onGestureEvent(e) {
    'worklet'
    const { deltaX, state, currentTarget: { dataset: { index } } } = e;
    const child = this.data.fixMoneyAnimal[index];
    const tempX = child.cardX.value + deltaX;
    const cardOpenX = -80;
    const actionOpenX = -26;
    const durationTime = 600;
    const animalBezier = Easing.bezier(.16, .53, .18, .82);

    if (deltaX > 0) {
      this.data.directionFlag.value = 1;
    } else if (deltaX < 0) {
      this.data.directionFlag.value = -1;
    }

    if (state == 2) {
      if (tempX > 0) {
        child.cardX.value = 0;
        child.actionX.value = 0;
      } else {
        let calculateX = deltaX;
        if (child.cardX.value < cardOpenX) {
          const n1 = Math.abs(child.cardX.value + deltaX) + cardOpenX;
          calculateX = deltaX * (1 - n1 * 1.0 / 50)
        }

        child.cardX.value += calculateX;
        child.actionX.value += calculateX * 0.3;

      }
    } else if (state == 3) {
      if (this.data.directionFlag.value > 0 || child.cardX.value > -20) {
        runOnJS(this.updateFixMoney)(index, false)

        child.cardX.value = timing(0, {
          duration: durationTime,
          easing: animalBezier,
        });
        child.actionX.value = timing(0, {
          duration: durationTime,
          easing: animalBezier,
        });
      } else {
        runOnJS(this.updateFixMoney)(index, true);

        child.cardX.value = timing(cardOpenX, {
          duration: durationTime,
          easing: animalBezier,
        });

        child.actionX.value = timing(actionOpenX, {
          duration: durationTime,
          easing: animalBezier,
        });
      }
    }


  },
  onChangeHead({ detail: { activeCard:
    { id: familyId, bankAccount: { currentBalance, id }, memberName } } }) {
    console.log(memberName)
    this.setData({
      childName: memberName,
      childMoney: currentBalance,
      bankAccountId: id
    })
    this.viewChildData(this.data.childDepositData, familyId);
  },
  viewChildData(childs, familyId) {
    if (childs.length > 0) {
      let activeDeposity;
      if (familyId == undefined) {
        activeDeposity = childs[0];
      } else {
        activeDeposity = childs.filter(p => p.familyId ? p.familyId == familyId : p.id == familyId)[0];
      }

      if (activeDeposity) {
        this.initDepositData(activeDeposity.deposit)
      } else {
        this.setData({
          fixMoneyData: [],
          fixMoneyAnimal: []
        })
      }
    }
  },
  freshData() {
    get('fixdeposit/child/deposit', {
      unicode: wx.getStorageSync('unicode')
    }, (data) => {
      if (data.length > 0) {
        data.forEach(item => {
          item.deposit.forEach(p => {
            p.endDate = moment(p.endDate).format('YYYY-MM-DD')
          })
        });

        this.viewChildData(data);

        this.setData({
          childDepositData: data
        })

        this.data.directionFlag = shared(0);
        // this.initDepositData(data[0].deposit)
      }

    })
  }

})